import React, { useRef, useState } from 'react';
import { Carousel as AntCarousel, Card } from 'antd';
import { LeftOutlined, RightOutlined } from '@ant-design/icons';

const carouselItems = [
  {
    id: 1,
    title: 'OpenAI发布GPT-5重大突破',
    image: 'https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=800&q=80',
    link: '/news/1'
  },
  {
    id: 2,
    title: '国家发布AI监管新规',
    image: 'https://images.unsplash.com/photo-1465101046530-73398c7f28ca?auto=format&fit=crop&w=800&q=80',
    link: '/news/2'
  },
  {
    id: 3,
    title: 'Meta发布新一代AI模型',
    image: 'https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=800&q=80',
    link: '/news/3'
  }
];

const Carousel: React.FC = () => {
  const carouselRef = useRef<any>(null);
  const [active, setActive] = useState(0);

  const goTo = (idx: number) => {
    setActive(idx);
    carouselRef.current?.goTo(idx);
  };

  const prev = () => {
    const idx = (active - 1 + carouselItems.length) % carouselItems.length;
    goTo(idx);
  };

  const next = () => {
    const idx = (active + 1) % carouselItems.length;
    goTo(idx);
  };

  return (
    <div style={{ position: 'relative', background: '#f5f7fa', borderRadius: 12 }}>
      <AntCarousel
        ref={carouselRef}
        dots={false}
        beforeChange={(_, nextIdx) => setActive(nextIdx)}
        effect="scrollx"
      >
        {carouselItems.map(item => (
          <div key={item.id}>
            <Card
              hoverable
              cover={<img alt={item.title} src={item.image} style={{ height: 400, objectFit: 'cover', borderRadius: 12 }} />}
              style={{ border: 'none', borderRadius: 12, margin: 0, padding: 0 }}
              bodyStyle={{ padding: 24 }}
            >
              <Card.Meta
                title={<span style={{ fontSize: 20, fontWeight: 600 }}>{item.title}</span>}
                description={<span style={{ color: '#888' }}>点击查看详情</span>}
              />
            </Card>
          </div>
        ))}
      </AntCarousel>
      {/* 左右箭头 */}
      <button
        onClick={prev}
        style={{
          position: 'absolute',
          left: 16,
          top: '50%',
          transform: 'translateY(-50%)',
          zIndex: 2,
          background: 'rgba(0,0,0,0.4)',
          border: 'none',
          borderRadius: '50%',
          width: 40,
          height: 40,
          color: '#fff',
          fontSize: 20,
          cursor: 'pointer',
        }}
        aria-label="上一张"
      >
        <LeftOutlined />
      </button>
      <button
        onClick={next}
        style={{
          position: 'absolute',
          right: 16,
          top: '50%',
          transform: 'translateY(-50%)',
          zIndex: 2,
          background: 'rgba(0,0,0,0.4)',
          border: 'none',
          borderRadius: '50%',
          width: 40,
          height: 40,
          color: '#fff',
          fontSize: 20,
          cursor: 'pointer',
        }}
        aria-label="下一张"
      >
        <RightOutlined />
      </button>
      {/* 底部Tab指示条 */}
      <div style={{ display: 'flex', justifyContent: 'center', gap: 24, marginTop: 12, marginBottom: 8 }}>
        {carouselItems.map((item, idx) => (
          <div
            key={item.id}
            onClick={() => goTo(idx)}
            style={{
              cursor: 'pointer',
              color: active === idx ? '#1677ff' : '#888',
              fontWeight: active === idx ? 700 : 400,
              fontSize: 16,
              padding: '4px 12px',
              borderBottom: active === idx ? '3px solid #1677ff' : '3px solid transparent',
              transition: 'all 0.2s',
            }}
          >
            {item.title}
          </div>
        ))}
      </div>
    </div>
  );
};

export default Carousel; 